@mixin shadow() {
  -webkit-mask-image: linear-gradient(90deg, transparent, #181818 20%, #181818 80%, transparent);
}

@mixin card-gradient($color) {
  $horizontal: 0px;
  $vertical: 0px;
  $blur: 25px;
  $spread: 20px;
  box-shadow: $horizontal $vertical $blur $spread $color inset;
  -webkit-box-shadow: $horizontal $vertical $blur $spread $color inset;
  -moz-box-shadow: $horizontal $vertical $blur $spread $color inset;
}

@mixin focus-bgText() {
  @apply 
  transition-opacity
  duration-300;

  --x: 0px;
  --y: 0px;
  
  -webkit-mask-image: radial-gradient(
    200px circle at var(--x) var(--y), 
    rgb(255 255 255) 20%, 
    rgb(255 255 255 / 25%), 
    transparent
  );
}
